import React, { Component } from "react";
import { Button, Modal, Input, Radio, message } from "antd";
import url from "@/config/url";
import axios from "@/http/http";

class ModalCom extends Component {
  state = {
    isModalVisible: false, // 不显示模态框
    userinfo: {
      username: "",
      password: "",
      email: "",
      gender: 1, //性别,合法值为1男、2女、3保密
      mobile: "", // number
    },
  };
  // 显示模态框事件方法
  showModal = () => {
    this.setState({
      isModalVisible: true,
    });
  };
  // 点击确认方法
  handleOk = () => {
    this.setState({
      isModalVisible: false,
    });
    // 调用添加用户接口
    axios
      .post(url.adduser, this.state.userinfo)
      .then((res) => {
        console.log(res);
        if (res.data.errNo == 0) {
          message.success("添加成功", 1, () => {
            // 重新请求所有的用户列表数据
            this.props.loadData();
          });
        } else {
          message.error(res.data.errText, 1);
        }
      })
      .catch((e) => {});
  };
  // 点击取消
  handleCancel = () => {
    this.setState({
      isModalVisible: false,
    });
  };

  render() {
    const { username, password, email, gender, mobile } = this.state.userinfo;
    return (
      <>
        <Modal
          title={this.props.modalTitle}
          visible={this.state.isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>
            <Input
              placeholder="用户名"
              value={username}
              name="username"
              onChange={this.onChange}
            ></Input>
          </p>
          <p>
            <Input
              placeholder="密码"
              value={password}
              name="password"
              onChange={this.onChange}
            ></Input>
          </p>
          <p>
            <Input
              placeholder="邮箱"
              value={email}
              name="email"
              onChange={this.onChange}
            ></Input>
          </p>
          <div>
            <Radio.Group value={gender} name="gender" onChange={this.onChange}>
              <Radio value={1}>男</Radio>
              <Radio value={2}>女</Radio>
              <Radio value={3}>保密</Radio>
            </Radio.Group>
          </div>
          <p>
            <Input
              placeholder="手机号"
              value={mobile}
              name="mobile"
              onChange={this.onChange}
            ></Input>
          </p>
        </Modal>
      </>
    );
  }
  onChange = (e) => {
    // console.log(e.target.name);
    // console.log(e.target.value);
    const key = e.target.name;
    this.setState({
      userinfo: {
        ...this.state.userinfo,
        [key]: e.target.value,
      },
    });
  };
}

export default ModalCom;
